<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
      @changeAddress="changeAddress"
      @changeGdArea="changeGdArea"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure" v-if="openType!='detail'">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  alarmFacilityDetail,
  alarmFacilityUpdate,
  alarmFacilityAdd
} from '@/api/alarm/facility'
import VForm from "@/components/VForm";
import {alarmFacilityTypeList} from "@/api/alarm/alarmFacilityType";

export default {
  components: {
    VForm,
  },
  props: {
    width: {
      type: String,
      default: "70%",
    },
    title: {
      type: String,
      default: "详情",
    },
    id: {},
    openType: {
      type: String,
      default: "add"
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'width': {
      handler(newVal, oldVal) {
        console.log('newVal===', newVal, oldVal)
        let w = this.width.split('%')[0]
        if (w >= 60) {
          this.rowspan = 2
        } else {
          this.rowspan = 1
        }
      },
      deep: true,
      immediate: true
    },
    'typeOptions': {
      handler(newVal, oldVal) {
        console.log("--new----" + newVal)
        this.formData.options.forEach(t => {
          if (t.key == 'type') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
    'modeType': {
      handler(newVal, oldVal) {
        this.formData.form.modeType = newVal;
      },
      deep: true,
      immediate: true
    },
    'openType':{
      handler(newVal, oldVal) {
        // 清空再添加
        this.formData.options = this.formData.options.filter(t=> !t.readonly)
        if(newVal != 'add'){
          let item = {
              title: "标识码",
              key: "num",
              type: "text",
              disabled: true,
              readonly:true
            }
          this.formData.options.unshift(item)
        }
        this.formData.options.forEach(t => {
          if(!t.readonly){
            t.disabled =  newVal == 'detail'
            // 编辑设施类型不可修改
            if(newVal=='edit' && t.key == 'type'){
              t.disabled = true
            }
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
      }
    }
  },
  data() {
    return {
      modeType: '',
      alarmType: '',

      rowspan: 1,
      dict: {},
      formData: {
        form: {
          modeType: this.modeType,
          name: "",
          type: "",
          address: "",
          linkName: "",
          phone: "",
          unitName: "",
          remark: "",
          lon: "",
          lat: "",
          provinceCode: "",
          cityCode: "",
          countyCode: "",
          areaCode: "",

          mapData: {},
        },
        options: [
          {
            title: "设施名称",
            key: "name",
            type: "text",
          },
          {
            title: "设施类型",
            key: "type",
            type: "select",
            multiple: false,
            disabled: false,
            option: {
              data: this.typeOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "name", // 指定label对应data的字段
                value: "id", // 指定value对应data的字段
              },
            },
          },
          {
            title: "联系人",
            key: "linkName",
            type: "text",
          },
          {
            title: "联系电话",
            key: "phone",
            type: "text",
          },
          {
            title: "所属单位",
            key: "unitName",
            type: "text",
          },
          // {
          //   title: "设施编号",
          //   key: "num",
          //   type: "text",
          // },
          {
            title: "养护单位",
            key: "maintenanceUnit",
            type: "text",
          },
          {
            title: "竣工日期",
            key: "completionTime",
            type: "date",
          },
          {
            title: "备注",
            key: "remark",
            type: "text",
          },
          {
            title: '设施位置',
            type: 'mapPosition',
            key: 'mapData',
            disabled: false,
          },
        ],
        rules: {
          name: [
            {required: true, message: '请输入', trigger: 'blur'},
            {max: 128, message: '长度最大为128个字符', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请选择', trigger: 'change'},
          ],
          address: [
            {max: 150, message: '长度最大为150个字符', trigger: 'blur'}
          ],
          linkName: [
            {max: 30, message: '长度最大为30个字符', trigger: 'blur'}
          ],
          phone: [
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          unitName: [
            {max: 80, message: '长度最大为80个字符', trigger: 'blur'}
          ],
          remark: [
            {max: 200, message: '长度最大为200个字符', trigger: 'blur'}
          ],
          lon: [
            {max: 36, message: '长度最大为36个字符', trigger: 'blur'}
          ],
          lat: [
            {max: 36, message: '长度最大为36个字符', trigger: 'blur'}
          ],
          provinceCode: [
            {max: 12, message: '长度最大为12个字符', trigger: 'blur'}
          ],
          cityCode: [
            {max: 12, message: '长度最大为12个字符', trigger: 'blur'}
          ],
          countyCode: [
            {max: 12, message: '长度最大为12个字符', trigger: 'blur'}
          ],
          areaCode: [
            {max: 12, message: '长度最大为12个字符', trigger: 'blur'}
          ],
        },
        labelWidth: "140px",
      },
      // 字典
      typeOptions: [],
    };
  },
  methods: {
    initMap(data) {
      this.formData.form.mapData = {
        address: data.address,
        gpsX: data.lon,
        gpsY: data.lat,
        towncode: data.areaCode,
      };
    },
    changeAddress(data) {
      console.log('changeAddress', data)
      this.formData.form.mapData = data
      this.formData.form.lon = data.gpsX
      this.formData.form.lat = data.gpsY
      this.formData.form.address = data.address

      this.formData.form.provinceCode = data.areaCode[0]
      this.formData.form.cityCode = data.areaCode[1]
      this.formData.form.countyCode = data.areaCode[2]
      this.formData.form.areaCode = data.towncode
    },
    changeGdArea(data) {
      console.log('changeGdArea', data)
      console.log(this.formData.form.areaCode_new)
    },
    submitFormat() {
    },
    loadFormat() {
    },
    getCheckBoxData(value, option, type) {
      if (type == "submit") {
        if (value.length == 0) {
          return null
        }
        let temp = [];
        value.forEach(t => {
          let item = option.find(x => x.label == t)
          if (item != undefined) {
            temp.push(item.value)
          }
        })
        return temp.join(",")
      } else {
        if (!value) {
          return []
        } else {
          let data = value.split(",")
          let temp = []
          data.forEach(t => {
            let item = option.find(x => x.value == t)
            if (item != undefined) {
              temp.push(item.label)
            }
          })
          return temp
        }
      }
    },
    sure() {
      console.log('sure===', this.formData.form)
      this.$refs.vformComponents.$refs.form.validate().then(res => {
        this.submitFormat()
        if (this.openType == "add") {
          this.add()
        } else {
          this.update()
        }
      })
    },
    add() {
      this.formData.form.id = null
      alarmFacilityAdd(this.formData.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: this.$t('tips.createSuccess'),
            type: 'success'
          })
          this.closeSuccess()
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
    update() {
      alarmFacilityUpdate(this.formData.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: this.$t('tips.updateSuccess'),
            type: 'success'
          })
          this.closeSuccess()
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
    cancel() {
      this.close()
    },
    handleClose(done) {
      done()
      this.close()
    },
    closeSuccess() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$emit('success')
    },
    close() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$emit('close')
    },
    getData() {
      // this.formData.options[1].disabled = false

      if (this.openType != "add") {
        // if (this.openType == "edit") {
        //   console.log(this.openType)
        //   this.formData.options[1].disabled = true
        // }
        alarmFacilityDetail(this.id).then(res => {
          if (res.code == 200) {
            res.data.type = parseInt(res.data.type)
            this.formData.form = res.data
            this.loadFormat()
            this.initMap(res.data);
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      }
    },
    getAlarmFacilityTypeList() {
      alarmFacilityTypeList({"type": this.alarmType}).then(res => {
        if (res.code == 200) {
          this.typeOptions = res.data
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      });
    },
    initAlarmConfig() {
      let type = this.$route.path
      console.log("path:" + type)
      const config = this.$commonJs.getAlarmPathConfig(this.$route.path)
      this.modeType = config.modeType
      this.alarmType = config.alarmType
    }
  },
  created() {
    this.initAlarmConfig()
    // 获取字典值
    this.getAlarmFacilityTypeList();
  },
};
</script>

<style lang="scss" scoped>

</style>
